<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>资招</title>
	<link rel="stylesheet" type="text/css" href="../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../build/css/style.css">
	<script src="../build/public/vue.js" charset="utf-8"></script>
	<script src="../build/public/base.js" charset="utf-8"></script>
	<script src="../build/public/vue-resource.js" charset="utf-8"></script>
	<script src="../build/js/config.js" charset="utf-8"></script>
	<script src="../build/js/common.js" charset="utf-8"></script>
	<script src="../build/js/jquery.min.js"></script>
	<script src="../build/js/template.js"></script>
	<script src="../build/js/TouchSlide.1.1.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
	<script type="text/javascript">
		loader.init();
	</script>
	<div id="container" style="padding-bottom:50px;">
		<div class="loadDiv" v-bind:class="{active:loadHide}"></div>
		<!--顶部banner-->
		<div class="top" style="width: 100%;overflow: hidden;" id="focus">
			<div class="search-bar">
				<span class="iconfont search-icon" :class="{active:inputFocus}">&#xe601;</span>
				<input type="search" class="input-top" :class="{active:inputFocus}"  v-model="inputValue" placeholder="银行理财 / 公募基金 / 私募 / 保险产品"  @keyup.enter="searchList">
				<button class="indexSearchBtn" type="button" v-if="inputFocus" @click="searchCancel">取消</button>
				<div class="notice">
					<a @click='goHref()'>
						<i class="mine-circle" v-show="msgCount != 0 ">{{msgCount}}</i>
						<span class="iconfont">&#xe616;</span>
					</a>
				</div>
				<div class="search-bac search-bac-index" v-if="inputFocus">
					<div class="history-list-wrap">
						<p><span class="iconfont">&#xe627;</span>历史搜索</p>
						<ul>
							<li class="history-list" v-for="item in historyList">
								<i  @click="hisSearch(item.keywords)">{{item.keywords}}</i><span class="iconfont" @click="delKeyWords(item.idStr)">&#xe624;</span>
							</li>
						</ul>
						<a v-if="historyList.length>0" @click="delAllKeyWords">清空搜索记录</a>
					</div>
				</div>
			</div>
			<div class="bd" v-show="!inputFocus">
				<ul>
					<li><a class="pic" href="#"><img src="../build/images/banner1.png" /></a></li>
					<li><a class="pic" href="#"><img src="../build/images/banner2.png"/></a></li>
				</ul>
			</div>
			<div class="hd" v-show="!inputFocus"><ul></ul></div>
		</div>
		<div class="index-new" v-show="!inputFocus" style="width: 100%;">
			<!--资招测评 -->
			<div class="big-data index-card index-new-card index-pad">
				<h2><span>资招评测</span></h2>
				<div class="index-tab-new">
					<div class="index-tab-wrap">
						<a :href="'pages/find/detail.html?idStr='+ pic1.idStr">
							<div class="index-tab-image" style="overflow:hidden;height:130px;">
								<!--<img src="build/images/demo1.png">-->
								<img :src="pic1.pictureUrl">
								<div class="index-tab-cover" style="height:130px;"></div>
								<section class="tab-title">
									<p>{{ pic1.title }}</p>
									<p v-show="pic1.opinionType">{{ pic1.opinionType | categoryName }}</p>
								</section>
							</div>
						</a>
						<a :href="'pages/find/detail.html?idStr='+ pic2.idStr">
							<div class="index-tab-image" style="overflow:hidden;height:130px;">
								<!--<img src="build/images/demo2.png">-->
								<img :src="pic2.pictureUrl">
								<div class="index-tab-cover" style="height:130px;"></div>
								<section class="tab-title">
									<p>{{ pic2.title }}</p>
									<p v-show="pic2.opinionType">{{ pic2.opinionType | categoryName }}</p>
								</section>
							</div>
						</a>
						<a :href="'pages/find/detail.html?idStr='+ pic3.idStr">
							<div class="index-tab-image" style="overflow:hidden;height:130px;">
								<!--<img src="build/images/demo1.png">-->
								<img :src="pic3.pictureUrl">
								<div class="index-tab-cover" style="height:130px;"></div>
								<section class="tab-title">
									<p>{{ pic3.title }}</p>
									<p v-show="pic3.opinionType">{{ pic3.opinionType | categoryName }}</p>
								</section>
							</div>
						</a>
					</div>
				</div>
			</div>
			<!--趣看-->
			<div class="big-data index-card index-new-card">
				<h2><span>趣看</span></h2>
				<div class="index-tab-audio">
					<div class="index-video-con" @click="link(video1.videoUrl,video1.localVideoUrl,video1.idStr)">
						<a style="overflow:hidden;display: block;text-align:center;">
							<img id="video1"  :src="video1.pictureUrl" class="video" style="height:130px;width:auto !important;display: inline-block;"/>
							<div class="index-video-cover" style="height:130px;"></div>
							<img src="build/images/play.png" class="index-audio-play">
							<p>{{ video1.title }}</p>
						</a>
					</div>
					<div class="index-video-con" @click="link(video2.videoUrl,video2.localVideoUrl,video2.idStr)">
						<a  style="overflow:hidden;display: block;text-align:center;">
							<img id="video2"  :src="video2.pictureUrl" class="video" style="height:130px;width:auto !important;display: inline-block;"/>
							<div class="index-video-cover" style="height:130px;"></div>
							<img src="build/images/play.png" class="index-audio-play">
							<p>{{ video2.title }}</p>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!--数据图表-->
		<div class="big-data index-card"  v-show="!inputFocus"  >
			<h2><span>大数据推荐</span></h2>
			<p>
				<span class="iconfont">&#xe618;</span>
				<a>收益曲线</a>
			</p>
			<div id="chart"></div>
		</div>
		<!--精选产品-->
		<div class="index-pro index-card" v-show="!inputFocus" >
			<h2><span>精选产品</span></h2>
			<div v-for="(item,index) in proList">
				<div class="pro-list pro-list-bank"  v-if="item.category === 'BANK_FINANCIAL'">
					<!--<a v-bind:href="'pages/product/product_3_detail.html?idStr='+item.idStr">-->
					<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
						<div class="budge"><span>B{{index+1}}</span></div>
						<div class="pro-num clear-fix">
							<div class="pro-num-text pro-num-left">
								<b>{{(item.apr).toFixed(2)}}<i>%</i></b>
								<span>预期收益率</span>
							</div>
							<div class="pro-num-text pro-num-right">
								<b class="investment" v-if="item.investmentTerm == 0 ">--</b>
								<b class="investment" v-else>{{item.investmentTerm}}<i>{{item.investmentTermUnit | formatUnit}}</i></b>
								<span>投资期限</span>
							</div>
						</div>
						<div class="pro-text">
							{{item.name}}
						</div>
					</a>
				</div>
				<div class="pro-list" v-else-if="item.category === 'PUBLIC_FUND'">
					<div v-if="item.fundType === 'MONETARY_FUND'">
						<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
							<div class="budge"><span>B{{index+1}}</span></div>
							<div class="pro-public-list-title">
								<b>{{item.product.name}}</b>
							</div>
							<div class="pro-public-list-con">
								<ul class="clear-fix">
									<li class="pro-public-main">
										<span>{{item.copiesBenefit | formatNum('','%')}}</span>
										<i>每万份收益</i>
									</li>
									<li class="pro-public-vice">
										<span>{{item.avgApr | formatNum('+','%')}}</span>
										<i>七日年化收益率</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>{{item.fundType | fundType}}</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
					<div v-else>
						<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
							<div class="budge"><span>B{{index+1}}</span></div>
							<div class="pro-public-list-title">
								<b>{{item.product.name}}</b>
							</div>
							<div class="pro-public-list-con">
								<ul class="clear-fix">
									<li class="pro-public-main">
										<!--<span v-if="v.nearThreeMonthApr == 0">&#45;&#45;</span>-->
										<span v-if="!item.nearThreeMonthApr">--</span>
										<span v-else>{{item.nearThreeMonthApr  | formatNum('','%')}}</span>
										<i>近3个月收益</i>
									</li>
									<li class="pro-public-vice">
										<span v-if="!item.nearYearApr">--</span>
										<span v-else>{{item.nearYearApr | formatNum('','%')}}</span>
										<i>近一年收益</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>{{item.fundType | fundType}}</i>
									</li>
									<li>
										<span>最新净值</span>
										<i>{{item.todayNetvalue }}</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
				</div>
				<div class="pro-list pro-private-list pro-list-img" v-else-if="item.category === 'INSURANCE'">
					<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
						<div class="budge"><span>B{{index+1}}</span></div>
						<img :src="item.bannerImg" alt="">
					</a>
				</div>
				<div class="pro-list pro-private-list pro-list-img" v-else-if="item.category === 'PRIVATE_EQUITY'">
					<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
						<div class="budge"><span>B{{index+1}}</span></div>
						<img :src="item.bannerImg">
					</a>
				</div>
			</div>
			<div class='test' style="display: none;">
				<h3> 以下是测试   </h3>
				<!-- 111 -->
				<div class="pro-list pro-list-bank">
					<a>
						<div class="budge"><span>B1</span></div>
						<div class="pro-num clear-fix">
							<div class="pro-num-text pro-num-left">
								<b>gg<i>%</i></b>
								<span>预期收益率</span>
							</div>
							<div class="pro-num-text pro-num-right">
								<b class="investment">--</b>
								<span>投资期限</span>
							</div>
						</div>
						<div class="pro-text">
							银行理财
						</div>
					</a>
				</div>
				<!-- 222  -->
				<div class="pro-list">
					<div>
						<a>
							<div class="budge"><span>B3</span></div>
							<div class="pro-public-list-title">
								<b>华夏成长</b>
							</div>
							<div class="pro-public-list-con" >
								<ul class="clear-fix">
									<li class="pro-public-main">
										<span>--</span>
										<i>每万份收益</i>
									</li>
									<li class="pro-public-vice">
										<span>--</span>
										<i>七日年化收益率</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>--</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
				</div>
				<div class="pro-list">
					<div>
						<a>
							<div class="budge"><span>B5</span></div>
							<div class="pro-public-list-title">
								<b>uu</b>
							</div>
							<div class="pro-public-list-con">
								<ul class="clear-fix">
									<li class="pro-public-main">
										<span>--</span>
										<i>近3个月收益</i>
									</li>
									<li class="pro-public-vice">
										<span>--</span>
										<i>近一年收益</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>--</i>
									</li>
									<li>
										<span>最新净值</span>
										<i>--</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
				</div>
				<!-- 333 -->
				<div class="pro-list pro-private-list pro-list-img">
					<a>
						<div class="budge"><span>B2</span></div>
						<img src="../../build/images/insurance-list.png" alt="">
					</a>
				</div>
				<!-- 444 -->
				<div class="pro-list pro-private-list pro-list-img">
					<a>
						<div class="budge"><span>B2</span></div>
						<img src="../../build/images/insurance-list.png" alt="">
					</a>
				</div>
			</div>
		</div>
		<!--底栏-->
		<my-footer></my-footer>
		<!--  confirm 框 隐藏 -->
		<div class="js-dialog">
			<div class="tip-mask"></div>
			<div class="tip-dialog">
				<div class="tip-dialog__hd"><strong class="tip-dialog__title">确定播放视频？</strong></div>
				<div class="tip-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
				<div class="tip-dialog__ft">
					<a href="javascript:;" class="tip__btn tip__btn_default" onclick="$('.js-dialog').hide();">取消</a>
					<a href="javascript:;" class="tip__btn tip__btn_primary" @click="getLink(videoUrl,localVideoUrl,idStr);">确定</a>
				</div>
			</div>
		</div>
	</div>

<script src="../build/public/echarts.common.min.js" charset="utf-8"></script>
<script src="../build/js/index.chart.option.js" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#container",
	data:{
		proList:[],
		inputText:'大家都在搜：银行理财',
		inputValue:'',
		inputFocus:false,
		historyList:[],
		loadHide:false,
		msgCount:0,
		zzPro:[],
		qk:[],
		pic1:'',
		pic2:'',
		pic3:'',
		video1:'',
		video2:'',
		videoUrl:'',
		localVideoUrl:'',
		idStr:'',
		networkType:''
	},
	mounted:function(){
		this.$nextTick(function(){
			this.getChartData();//获取图表数据
			vm.init();
			vm.getNet();
			vm.getZzcp();
			vm.getqk();
		})
	},
	updated:function () {
		this.$nextTick(function () {
			vm.emptyHandle();
		});
	},
	methods:{
		goHref:function(){
			if(isLogin()==false){
			    window.location.href='/pages/login/login.html'
			  }else{
			    window.location.href='/pages/mine/message.html'
			  }
		},
		//数据列表和产品列表
		getChartData:function(){
			var $this = this;
			noParamsGet('/advisor/home/big-data-recommended-product',function(res){
				res.data.recommendedProductAprList.unshift('')
				var indexChart =  echarts.init(document.getElementById('chart'));
				indexChart.setOption(
					chartOption(
						res.data.recommendedProductAprList,
						res.data.marketAverageAprList
					)
				);
				vm.proList = res.data.productList
				var len = vm.proList.length;
				for(var i=0; i<len; i++){
					if(vm.proList[i].category == 'INSURANCE' || vm.proList[i].category == 'PRIVATE_EQUITY'){
						vm.proList[i].bannerImg = domain + vm.proList[i].bannerImg;
					}
				}
				loader.remove();
				vm.loadHide = true
			});
			//未读消息数
			noParamsGet('/advisor/msg/unread-count',function(res){
				vm.msgCount = res.data
				if(res.data>9){
					vm.msgCount='9+';
					$('.mine-circle').show();
				}else if(res.data==0){
					$('.mine-circle').hide();
				}else{
					$('.mine-circle').show();
				}
			})

		},
		init:function(){
			var searchInput = document.querySelector('.input-top');
			var footer = document.querySelector('.footer')
			searchInput.onfocus = function(){
				vm.inputFocus = true;
				vm.inputText = '';
				vm.showKeyWords();
				footer.style.display = 'none';

			}
			searchInput.onblur = function(){

			}
		},
		searchCancel:function(){
			var footer = document.querySelector('.footer');

			vm.inputFocus = false;
			vm.inputText = '大家都在搜：银行理财';
			vm.inputValue = '';
			footer.style.display = 'block';

		},
		showKeyWords:function(){
			noParamsGet('/advisor/home/keywords-history',function(res){
				vm.historyList = res.data.slice(0,10);
			})
		},
		delKeyWords:function(idStr){
			post('/advisor/home/keywords-history/remove',{
				keywordsHistoryIdStr:idStr
			},function(res){
				vm.showKeyWords();
				toast('已删除')
			})
		},
		delAllKeyWords:function(){
			noParamsPost('/advisor/home/keywords-history/clear',function(res){
				vm.showKeyWords();
				toast('已清空')
			})
		},
		searchList:function(){
			if(vm.inputValue == ''){
				toast('请输入搜索条件');
				return
			}
			window.location.href = 'pages/product/search.html?keyWord='+vm.inputValue;
		},
		hisSearch:function(keywords){
			vm.inputValue = keywords;
			window.location.href = 'pages/product/search.html?keyWord='+vm.inputValue;
		},
		getParameter:function(name){                        //获取链接参数
			var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 			var r = window.location.search.substr(1).match(reg);
 			if(r!=null)return  unescape(r[2]); return null;
		},
		emptyHandle:function () {
			var investments = document.getElementsByClassName('investment');
			for(var i = 0; i < investments.length; i++){
				if(investments[i].innerText == '0天'){
					investments[i].innerText = '--';
				}
			}
		},
		getqk:function () {
			var url = "/homePage/qk-list";
			noParamsGet(url,function (res) {
				if(res.data.length){
					vm.qk = res.data;
					vm.video1 = vm.qk[0];
					vm.video2 = vm.qk[1];
					vm.video1.pictureUrl = domain + vm.video1.pictureUrl;
					vm.video2.pictureUrl = domain + vm.video2.pictureUrl;
				}
			})
		},
		getZzcp:function () {
			var url = "/homePage/zzpc-list";
			noParamsGet(url,function (res) {
				if(res.data.length){
					vm.zzPro = res.data;
					vm.pic1 = vm.zzPro[0]
					vm.pic2 = vm.zzPro[1]
					vm.pic3 = vm.zzPro[2]
					var sections = document.getElementsByClassName('tab-title');
					if(!vm.pic1.opinionType){
						sections[0].style.lineHeight = 38+'px';
					}
					if(!vm.pic2.opinionType){
						sections[1].style.lineHeight = 38+'px';
					}
					if(!vm.pic3.opinionType){
						sections[2].style.lineHeight = 38+'px';
					}
					vm.pic1.pictureUrl = domain + vm.pic1.pictureUrl;
					vm.pic2.pictureUrl = domain + vm.pic2.pictureUrl;
					vm.pic3.pictureUrl = domain + vm.pic3.pictureUrl;
				}
			});
		},
		link:function (videoUrl,localVideoUrl,idStr) {
			//	vm.networkType = '3g';
			if(vm.networkType == 'wifi'){
				this.getLink(videoUrl,localVideoUrl,idStr);
			}
			else{
				var title = '确定播放视频？';
				var content = '您正在使用'+vm.networkType+'网络，是否继续播放视频？'
				vm.videoUrl = videoUrl;
				vm.localVideoUrl = localVideoUrl;
				vm.idStr = idStr
				confirm(title,content);
			}
		},
		getLink:function (videoUrl,localVideoUrl,idStr) {
			$('.js-dialog').hide();
			if(videoUrl && videoUrl != ''){
				window.location.href =  videoUrl;
			}
			if(localVideoUrl &&  localVideoUrl != 'undefined'){
				window.location.href =  'pages/find/play.html?idStr='+ idStr
			}
		},
		getNet:function () {
			wx.config({
				debug: false,
				appId: 'wxfc53d38dc557de17',
				jsApiList: [
					'checkJsApi',
					'getNetworkType',
				]
			});
			wx.ready(function () {
				wx.getNetworkType({
					success: function (res) {
						vm.networkType = res.networkType;
					},
				});
			});
		}
	},
	filters:{
		changeUrl:function(category,fundType,idStr){
			switch (category) {
				case 'BANK_FINANCIAL':
					return 'pages/product/product_2_detail.html?idStr='+idStr;
					break;
				case 'PUBLIC_FUND':
					if(fundType == 'MONETARY_FUND'){
						return 'pages/product/product_3_detail_1.html?idStr='+idStr;
					}
					else{
						return 'pages/product/product_3_detail.html?idStr='+idStr;
					}
					break;
				case 'INSURANCE':
					return 'pages/product/product_4_detail.html?idStr='+idStr;
					break;
				case 'PRIVATE_EQUITY':
					return 'pages/product/product_5_detail.html?idStr='+idStr;
					break;

			}
		}
	}
})
</script>
<script>
	//	 slider
	TouchSlide({
		slideCell:"#focus",
		titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
		mainCell:".bd ul",
		effect:"leftLoop",
		autoPage:true, //自动分页
		autoPlay:true,//自动播放
	});
	function confirm(title,content) {
		$('.tip-dialog__title').html(title);
		$('.tip-dialog__bd').html(content);
		$('.js-dialog').show();
	}
</script>
</body>
</html>
